<template>
    <div id="app">
        <Head>我要推广</Head>
        <img class="bg" src="../../../assets/images/cityinfo/promote/promote_29.png">
        <div class="title">推广套餐</div>
        <div class="list" v-if="list.length>0">
            <div class="item" :class="sub.listid==item.index?'selitem':''" v-for="(item,index) in list" :key="index" @click="selitem(item.index,item.fee)">
                <div class="name">{{item.name}}</div>
                <div class="money">￥<span>{{item.fee}}</span></div>
                <div class="center">{{item.tip}}</div>
            </div>
        </div>
        <div class="project" @click="prolist.length>'0'?show=true:show=false">
            <div class="name">信息名称</div>
            <div class="value" :class="sub.proname?'sel':''"><div class="valuecen">{{sub.proname?sub.proname:prolist.length>'0'?'请选择':'暂无可推广信息'}}</div><van-icon name="arrow" /></div>
        </div>
        <van-popup v-model="show" position="bottom">
            <van-picker
                show-toolbar
                :columns="prolist"
                @confirm="onConfirm"
                @cancel="show = false"
            />
        </van-popup>
        <div class="titletwo">支付方式</div>
        <div class="alipay">
            <label>
                <img src="../../../assets/freelance/images/promote_5.png"/>
                支付宝
                <input class="radio" type="radio" value="alipay" v-model="sub.picked"/>
            </label>
        </div>
        <div class="wechat">
            <label>
                <img src="../../../assets/freelance/images/promote_4.png"/>
                微信支付
                <input class="radio" type="radio" value="wxpay" v-model="sub.picked"/>
            </label>
        </div>
        <div class="moneydiv">应付金额：<div class="money">￥<span>{{sub.listmoney}}</span></div></div>
        <div class="btn">
            <div class="paybtn" @click="confirmpay">确认支付</div>
        </div>
        <PaySubmit ref="paySubmit" :payment="sub.picked" success-url="/cityinfo/infopromanage"></PaySubmit>
    </div>
</template>
<script>
import Vue from 'vue'
import { Icon } from 'vant'
import http from '@/utils/http'
import api from '@/api'
import PaySubmit from '@/components/service/PaySubmit'

Vue.use(Icon)
export default {
  components: {
    PaySubmit
  },
  data () {
    return {
      show: false,
      prolist: [],
      list: [],
      sub: {
        listid: 0,
        listmoney: '',
        proid: '',
        proname: '',
        picked: ''
      }
    }
  },
  created () {
    if (this.$route.query.id && this.$route.query.id != 'null') {
      this.sub.proid = this.$route.query.id
      this.sub.proname = this.$route.query.name
    }
    // 请求数据
    this.fetchData()
    // 请求所有项目
    this.project()
  },
  methods: {
    selitem (index, fee) {
      this.sub.listid = index
      this.sub.listmoney = fee
    },
    fetchData () {
      http.get(api.city_topsetmeal)
        .then(res => {
          this.list = [...res.data]
          this.sub.listid = this.list[0].index
          this.sub.listmoney = this.list[0].fee
        }).catch(() => {})
    },
    project () {
      http.get(api.city_infomanage, {all: 1})
        .then(res => {
          let list = [...res.data.list]
          for (let item of list) {
            let listtwo = [{
              text: item.title,
              id: item.id
            }]
            this.prolist = this.prolist.concat(listtwo)
          }
        }).catch(() => {})
    },
    onConfirm (value) {
      this.sub.proid = value.id
      this.sub.proname = value.text
      this.show = !this.show
    },
    confirmpay () {
      if (!this.sub.proid) {
        this.$notify('请选择信息名称')
        return false
      }
      if (!this.sub.picked) {
        this.$notify('请选择支付方式')
        return false
      }
      this.handlerSubmit()
    },
    handlerSubmit () {
      this.$refs.paySubmit.handlerSubmit(api.city_order_pay, {
        promo_index: this.sub.listid,
        id: this.sub.proid,
        order_type: 3,
        pay_type: this.sub.picked,
        redirect_url: this.$store.state.config.mobile_domain + 'cityinfo/infopromanage'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.bg{
    width: calc(100vw - 32px);
    margin-left: 16px;
}
.title{
    height: 16px;
    margin-left: 15px;
    background: url('../../../assets/freelance/images/promote_3.png') 0 0 no-repeat;
    background-size: 18px 16px;
    padding-left: 25px;
    font-size: 15px;
    color: #3d4c63;
    line-height: 1;
    display: flex;
    align-items: center;
}
.list{
    margin-top: 20px;
    margin-left: 17px;
    display: flex;
    overflow-x: scroll;
    .item{
        width: 123px;
        height: 126px;
        margin-right: 9px;
        border-radius: 5px;
        border: 2px solid #e5ebf2;
        background-color: #ffffff;
        &.selitem{
            border: 2px solid #fdde35;
            background-color: #fff9e0;
        }
        .name{
            width: 119px;
            line-height: 1;
            margin-top: 22px;
            font-size: 15px;
            color: #55340a;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
        }
        .money{
            width: 119px;
            line-height: 1;
            margin-top: 20px;
            margin-bottom: 15px;
            font-size: 13px;
            color: #ff5a00;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
            span{
                line-height: 1;
                font-size: 20px;
            }
        }
        .center{
            width: 119px;
            line-height: 1;
            font-size: 12px;
            color: #aa9675;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
        }
    }

}
.list::-webkit-scrollbar{
    display: none;
}
.project{
    margin-top: 25px;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
    display: flex;
    .name{
        line-height: 1;
        font-size: 15px;
        color: #555555;
    }
    .value{
        position: absolute;
        right: 0;
        line-height: 1;
        font-size: 15px;
        color: #cccccc;
        display: flex;
        align-items: center;
        .valuecen{
          width: calc(100vw - 130px);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-align: right;
        }
        &.sel{
            color: #777777;
        }
    }
}
.titletwo{
    line-height: 1;
    margin-top: 32px;
    margin-left: 15px;
    font-size: 15px;
    color: #333333;
}
.alipay,.wechat{
    margin-top: 21px;
    margin-left: 15px;
    font-size: 15px;
    color: #555555;
    display: flex;
    align-items: center;
    line-height: 1;
    label{
        width: calc(100vw - 30px);
        position: relative;
        display: flex;
        align-items: center;
        img{
            width: 20px;
            height: 20px;
            margin-right: 14px;
        }
        .radio{
             /* 隐藏原有样式 */
            appearance: none;
            -webkit-appearance: none;
            outline: none;
            position: absolute;
            right: 0;
            width: 20px;
            height: 20px;
            background: url('../../../assets/freelance/images/promote_7.png') 0 0 no-repeat;
            background-size: 20px 20px;
        }
        .radio:checked{
            background: url('../../../assets/images/sw_fw_ic2.png') 0 0 no-repeat;
            background-size: 20px 20px;
        }
    }
}
.moneydiv{
    line-height: 1;
    margin-top: 33px;
    font-size: 15px;
    color: #555555;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    .money{
        line-height: 1;
        font-size: 11px;
        color: #ff5a00;
        span{
            line-height: 1;
            font-size: 20px;
        }
    }
}
.btn{
    display: flex;
    justify-content: center;
    .paybtn{
        width: calc(100vw - 30px);
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 26px;
        font-size: 15px;
        color: #fff;
        border-radius: 50px;
        background-color: #1989f9;
    }
}
</style>
